<template>
  <div>
    <!-- 
      v-model用于实现表单元素（input/select/textarea）或组件的双向数据绑定，不要在其他的标签上面使用，会报错
      双向数据绑定就是视图模型 与 数据模型中的数据 同步变化
    -->
    用户名：<input type="number" v-model.number="username">
    <br>
    密码： <input type="text" v-model.lazy="password">
    <br>
    <button @click="login">登录</button>

    <input type="text" :value="username" @input="handleInput">

    <select v-model="country">
      <option value="1">中国</option>
      <option value="2">美国</option>
      <option value="3">日本</option>
    </select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      country: ''
    }
  },
  methods: {
    login() {
      console.log('登录');
      // TODO： 获取用户名和密码
      console.log(this.username, this.password);
    },
    handleInput(e) {
      this.username = e.target.value
    }
  }
}
</script>
<style>
  
</style>